<template>
  <!-- 新增类型dialog -->
  <Edialog
    title="选择联系人"
    width="70%"
    :outershow="show"
    saveClick
    @close="closeFn"
    @saveFn="saveFn"
  >
    <div style="padding: 0 20px">
      <el-row :gutter="20">
        <el-col :span="5">
          <div class="daj" style="font-size: 14px">
            <div style="width: 46px">分组</div>
            <Eselect
              style="width: 100%"
              isClearable
              :options="sendArr"
              :value="form.groupId"
              @EselectChange="form.groupId = $event"
            ></Eselect>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="daj" style="font-size: 14px">
            <div style="width: 46px">联系人</div>
            <el-input
              style="flex: 1"
              v-model="form.contactsName"
              placeholder="请输入"
              size="small"
              clearable
            ></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="daj" style="font-size: 14px">
            <div style="width: 46px">手机号</div>
            <el-input
              style="flex: 1"
              v-model="form.contactsMobile"
              placeholder="请输入"
              size="small"
              clearable
            ></el-input>
          </div>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="queryFn" size="small"
            >查询</el-button
          >
          <el-button type="primary" @click="resetting" size="small"
            >重置</el-button
          >
        </el-col>
      </el-row>
      <ETable
        style="margin-top: 10px"
        ref="ETable"
        :height="370"
        :titleObj="titleObj"
        @sortFun="sortFun"
        :reqObj="form"
        :reqFn="getBsContacts"
        checked
        :showIndex="false"
        @batch="batch"
        :ifShowPagination="false"
      >
      </ETable>
    </div>
  </Edialog>
</template>

<script>
import Edialog from '@/components/Edialog'
import { fd } from '@/utils/index'
import Eselect from '@/components/Eselect'
import ETable from '@/components/ETable'
import { getContactsGroupData } from '@/utils/publicReq'
import { getBsContacts } from '@/api/smsManage/groupContacts'
export default {
  components: {
    Edialog,
    Eselect,
    ETable
  },
  data () {
    return {
      show: false,
      sendArr: [],
      form: {
        contactsName: '',
        groupId: '',
        contactsMobile: '',
        sortStr: ''
      },
      titleObj: [
        { prop: 'contactsName', label: '联系人', width: '120' },
        { prop: 'contactsMobile', label: '手机号', width: '120' },
        { prop: 'groupName', label: '分组', width: '120' },
        { prop: 'contactsNotes', label: '备注' }
      ],
      multi: []
    }
  },
  methods: {
    getBsContacts,
    async open () {
      this.sendArr = await getContactsGroupData()
      this.show = true
      this.$nextTick(() => this.getData())
    },
    // 获取表格数据
    async getData () {
      this.$refs.ETable.getData()
    },
    // 查询
    queryFn () {
      this.$refs.ETable.pageInfo.page = 1
      this.getData()
    },
    resetting () {
      this.form.contactsName = ''
      this.form.groupId = ''
      this.form.contactsMobile = ''
      this.multi = []
    },

    async sortFun (str) {
      this.form.sortStr = str
      this.getData()
    },
    // 表格传出来的多选事件
    batch (val) {
      this.multi = val
    },
    // 保存事件
    saveFn () {
      this.multi.forEach(item => (item.remark = ''))
      this.$emit('callBackFn', this.multi)
      this.closeFn()
    },
    closeFn () {
      this.resetting()
      this.show = false
    }
  }
}
</script>

<style scoped lang="scss"></style>
